<template>
  <div style="border: 1px solid; padding: 10px;">
    <h4>base api - hooks</h4>
    <div>{{ counter }} - {{ status }}</div>
    <button @click="increase">num++</button>
    <button @click="decrease">num--</button>
    <hr>

    <div>{{ title }}</div>
    <button @click="title = '热门'">热门</button>
    <button @click="title = '热榜'">热榜</button>

    <hr>

    <div style="height: 2000px">scroll position：{{ scrollX }}, {{ scrollY }}</div>
  </div>
</template>

<script setup>
import {computed, reactive, ref, watch, watchEffect} from 'vue'
import useCounter from "../hooks/useCounter";
import useTitle from "../hooks/useTitle";
import useScrolPosition from "../hooks/useScrolPosition";
const { counter, increase, decrease } = useCounter(0)
const { scrollY, scrollX } = useScrolPosition()

const title = useTitle()
const status = computed(() => {
  if (counter.value === 0) return '良好'
  if (counter.value > 0) return '优秀'
  return '及格'
})

</script>



<style scoped>
</style>
